<template>
  <div id="supervisionInformation" class="app-container">
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="现场踏勘" name="1"></el-tab-pane>
        <el-tab-pane label="前期测绘" name="2"></el-tab-pane>
        <el-tab-pane label="初审信息" name="3"></el-tab-pane>
        <!-- <el-tab-pane label="成功初审" name="3"></el-tab-pane> -->
      </el-tabs>
    </div>
    <el-form :inline="true" label-position="right" label-width="90px" class="demo-form-inline">
      <el-form-item label="权利人姓名">
        <el-input
          style="width: 200px;"
          v-model="listQuery.applicantName"
          placeholder
          class="filter-item"
        />
      </el-form-item>
      <el-form-item label="复垦片块">
        <el-select
          style="width: 200px;"
          clearable
          v-model="listQuery.landId"
          class="filter-item"
          placeholder="请选择片块"
        >
          <el-option
            v-for="item in selectData"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          style="width: 200px;"
          v-model="listQuery.startTime"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          class="filter-item"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间">
        <el-date-picker
          v-if="activeName != 3"
          style="width: 200px;"
          v-model="listQuery.stopTime"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          class="filter-item"
        ></el-date-picker>
        <el-date-picker
          v-if="activeName == 3"
          style="width: 200px;"
          v-model="listQuery.finishTime"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          class="filter-item"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchData" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit">添加</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger">删除所选</el-button>
    </div>-->

    <el-table
      v-if="activeName=='1'"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
      <el-table-column label="申请编号" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.applyNum }}</template>
      </el-table-column>
      <el-table-column label="权利人" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.applicantName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="片块名称" align="center" min-width="150">
        <template slot-scope="scope">{{ scope.row.landName }}</template>
      </el-table-column>
      <el-table-column label="踏勘时间" align="center" width="100">
        <template slot-scope="scope">{{ scope.row.time?scope.row.time:'' }}</template>
      </el-table-column>
      <el-table-column label="踏勘位置" align="center" width="100">
        <template slot-scope="scope">{{ scope.row.place?scope.row.place:'' }}</template>
      </el-table-column>
      <el-table-column label="是否符合土地利用规划" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.lygh?(scope.row.lygh=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="是否符合土地整治规划" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.zzgh?(scope.row.zzgh=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="是否符合乡镇建设规划" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.xzjsgh?(scope.row.xzjsgh=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="坡度是否大于25度" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.pddy?(scope.row.pddy=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="土地权利人是否自愿申请" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.qlrzysq?(scope.row.qlrzysq=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="是否与周边农用地相连" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.zbnyd?(scope.row.zbnyd=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.time" @click="toSee(scope.row,1)" size="small">查看</el-button>
          <!-- <el-button type="text" @click="toSee(scope.row,1)" size="small">查看</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="activeName=='2'"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
      <el-table-column label="申请编号" align="center">
        <template slot-scope="scope">{{ scope.row.applyNum }}</template>
      </el-table-column>
      <el-table-column label="权利人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.applicantName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="前期测绘单位" align="center">
        <template slot-scope="scope">{{ scope.row.enterpriseName }}</template>
      </el-table-column>
      <el-table-column label="前期踏勘时间" align="center">
        <template slot-scope="scope">{{ scope.row.time?scope.row.time:'' }}</template>
      </el-table-column>
      <el-table-column label="前期踏勘位置" align="center">
        <template slot-scope="scope">{{ scope.row.place?scope.row.place:'' }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.time" @click="toSee(scope.row,2)" size="small">查看</el-button>
          <!-- <el-button type="text" @click="toSee(scope.row,2)" size="small">查看</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="activeName=='3'"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
      <el-table-column label="申请编号" align="center">
        <template slot-scope="scope">{{ scope.row.applyNum }}</template>
      </el-table-column>
      <el-table-column label="权利人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.applicantName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="初审时间" align="center" width="200">
        <template slot-scope="scope">{{ scope.row.time?scope.row.time:'' }}</template>
      </el-table-column>
      <el-table-column label="初审位置" align="center">
        <template slot-scope="scope">{{ scope.row.place?scope.row.place:'' }}</template>
      </el-table-column>
      <el-table-column label="复垦点坐标是否准确" width="180" align="center">
        <template
          slot-scope="scope"
        >{{ scope.row.ifDonateRight?(scope.row.ifDonateRight=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="1:500测绘成果与实地是否一致" width="180" align="center">
        <template
          slot-scope="scope"
        >{{ scope.row.ifResultRight?(scope.row.ifResultRight=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="近远景照片是否真实" width="180" align="center">
        <template
          slot-scope="scope"
        >{{ scope.row.ifPhotoRight?(scope.row.ifPhotoRight=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="复垦点权利人与图中标注是否一致" width="180" align="center">
        <template
          slot-scope="scope"
        >{{ scope.row.ifManRight?(scope.row.ifManRight=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column label="复垦点地类综合是否合理,可用值" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.ifRight?(scope.row.ifRight=="YES"?'是':'否'):'' }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.time" @click="toSee(scope.row,3)" size="small">查看</el-button>
          <!-- <el-button type="text" @click="toSee(scope.row,2)" size="small">查看</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="listQuery.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  supervisingInfo,
  earlySupervisingInfo,
  chushenJianguan
} from "@/api/siteSurveyEarlyStage";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeName: "1",
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectId: "",
        landId: "",
        applicantName: "",
        startTime: "",
        stopTime:'',
        finishTime: "",
        
      },
      total: 0, //总数
      selectData: [],

      isCel: true
    };
  },
  created() {
    this.getData();
    this.getDataSelect();
  },
  methods: {
    //前往查看
    toSee(row, type) {
      var sendData = {};
      if (this.activeName == "3") {
        sendData = {
          vcr: row.vcr,
          photo: row.photo,
          id: row.landId,
          type: type
        };
      } else {
        sendData = {
          id: row.landId,
          type: type
        };
      }
      this.$router.push({
        path: "/siteSurveyEarlyStage/supervisionInformation/detail",
        query: sendData
      });
      localStorage.setItem("zongheItem", JSON.stringify(row));
    },
    getData() {
      //
      this.listLoading = true;
      var data = {};
      var objArr = this.listQuery;
      for (var index in objArr) {
        if (objArr[index] !== "" && objArr[index] != null) {
          if(index == "startTime" || index == "stopTime" || index == "finishTime"){
            data[index] = objArr[index] + " " + "00:00:00";
          }else{
            data[index] = objArr[index];
          }
        }
      }
      data["projectId"] = localStorage.getItem("projectId");
      supervisingInfo(data)
        .then(res => {
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    getDataSelect() {
      //
      var data = {
        page: 1,
        size: 99999
      };
      data["projectId"] = localStorage.getItem("projectId");
      supervisingInfo(data).then(res => {
        var arr = [];
        res.data.rows.forEach(item => {
          arr.push({ value: item.landId, label: item.landName });
        });
        this.selectData = arr;
      });
    },
    getData1() {
      this.listLoading = true;
      var data = {};
      var objArr = this.listQuery;
      for (var index in objArr) {
        if (objArr[index] !== "" && objArr[index] != null) {
          if(index == "startTime" || index == "stopTime" || index == "finishTime"){
            data[index] = objArr[index] + " " + "00:00:00";
          }else{
            data[index] = objArr[index];
          }
        }
      }
      earlySupervisingInfo(data)
        .then(res => {
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    getDataSelect1() {
      var data = {
        page: 1,
        size: 99999
      };
      data["projectId"] = localStorage.getItem("projectId");
      earlySupervisingInfo(data).then(res => {
        var arr = [];
        res.data.rows.forEach(item => {
          arr.push({ value: item.landId, label: item.landName });
        });
        this.selectData = arr;
      });
    },
    getData2() {
      this.listLoading = true;
      var data = {};
      var objArr = this.listQuery;
      for (var index in objArr) {
        if (objArr[index] !== "" && objArr[index] != null) {
          if(index == "startTime" || index == "stopTime" || index == "finishTime"){
            data[index] = objArr[index] + " " + "00:00:00";
          }else{
            data[index] = objArr[index];
          }
        }
      }
      chushenJianguan(data)
        .then(res => {
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    getDataSelect2() {
      //
      var data = {
        page: 1,
        size: 99999
      };
      data["projectId"] = localStorage.getItem("projectId");
      chushenJianguan(data).then(res => {
        var arr = [];
        res.data.rows.forEach(item => {
          arr.push({ value: item.landId, label: item.landName });
        });
        this.selectData = arr;
      });
    },
    //搜索
    searchData() {
      if (this.activeName == "1") {
        this.getData();
      } else if (this.activeName == "2") {
        this.getData1();
      } else if (this.activeName == "3") {
        this.getData2();
      }
    },
    //改变每页显示条数
    handleSizeChange(e) {
      this.listQuery.size = e;
      if (this.activeName == "1") {
        this.getData();
      } else if (this.activeName == "2") {
        this.getData1();
      } else if (this.activeName == "3") {
        this.getData2();
      }
    },
    //改变页码
    handleCurrentChange(num) {
      this.listQuery.page = num;
      if (this.activeName == "1") {
        this.getData();
      } else if (this.activeName == "2") {
        this.getData1();
      } else if (this.activeName == "3") {
        this.getData2();
      }
    },
    handleClick(tab, event) {
      this.listQuery = {
        page: 1,
        size: 10,
        projectId: localStorage.getItem("projectId"),
        landId: "",
        applicantName: "",
        startTime: "",
        stopTime:'',
        finishTime: "",
      };
      if (this.activeName == "1") {
        this.getData();
        this.getDataSelect();
      } else if (this.activeName == "2") {
        this.getData1();
        this.getDataSelect1();
      } else if (this.activeName == "3") {
        this.getData2();
        this.getDataSelect2();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#supervisionInformation /deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
</style>
